import * as React from 'react';
import Link from '@mui/material/Link';
import Table from '@mui/material/Table';
import TableBody from '@mui/material/TableBody';
import TableCell from '@mui/material/TableCell';
import TableHead from '@mui/material/TableHead';
import TableRow from '@mui/material/TableRow';
import Button from '@mui/material/Button';
import Title from '../home/Title';
import { useEffect } from 'react';
import { getUserList, removeUser } from '../../../api/user';


const UserList = () => {

    const [users, setUsers] = React.useState([])

    useEffect(() => {
        
        getUserList().then(data => {
            setUsers(data)
        })

    }, [])



    return (
        <div>
            <Title>用户列表数据</Title>

            <Table size="small">
                <TableHead>
                    <TableRow>
                        <TableCell>ID</TableCell>
                        <TableCell>姓名</TableCell>
                        <TableCell>角色</TableCell>
                        <TableCell align="right">创建时间</TableCell>
                        <TableCell align="right">操作</TableCell>
                    </TableRow>
                </TableHead>
                
                <TableBody>
                    {users.map((row) => (
                        <TableRow key={row.id}>
                            <TableCell>{row.id}</TableCell>
                            <TableCell>{row.name}</TableCell>
                            <TableCell>{row.role}</TableCell>
                            <TableCell align="right">{row.createdAt}</TableCell>
                            <TableCell align="right">

                                {
                                    row.name === "root" ? null : (
                                        <Button
                                        // type="submit"
                                        // fullWidth
                                        // sx={{ mt: 3, mb: 2 }}
                                        variant="contained"
                                        onClick={async () => {
                                            if(window.confirm('你确定要删除该数据吗？')) {
                                                await removeUser(row.id)
                                                location.reload()
                                            }
                                        }}
                                        // disabled={row.name === "root" ? true : false}
                                    >
                                        删除
                                    </Button>
                                    )
                                }
                            </TableCell>
                        </TableRow>
                    ))}
                </TableBody>
            </Table>
        </div>
    )
}

export default UserList




